<template>
  <div class="UploadFile">
    <el-dialog
      title="文件上传"
      :visible.sync="dialogTableVisible"
      width="30%"
      @close="close"
    >
      <div class="myFile">
        <div>文件夹</div>
        <p class="myDocument">{{ fullName }}</p>
      </div>
      <el-form :model="form" :rules="rules" ref="ruleForm">
        <el-form-item
          label="发布日期"
          :label-width="formLabelWidth"
          prop="releaseDate"
        >
          <el-date-picker
            style="width: 300px"
            v-model="form.releaseDate"
            placeholder="请选择"
            clearable
            type="date"
            format="yyyy-MM-dd"
          >
          </el-date-picker>

          <!-- <el-date-picker
            v-model="form.releaseDate"
            type="date"
            placeholder="选择日期"
          > -->
          </el-date-picker>
        </el-form-item>
        <!-- <el-form-item
          label="评估周期"
          :label-width="formLabelWidth"
          prop="evaluationCycle"
        >
          <el-input
            v-model="form.evaluationCycle"
            style="width: 300px"
          ></el-input>
          天
        </el-form-item> -->
        <!-- <el-form-item
          label="版本号"
          :label-width="formLabelWidth"
          prop="version"
        >
          <el-input v-model="form.version" style="width: 300px"></el-input>
        </el-form-item> -->

        <el-form-item>
          <el-upload
            style="width: 500px"
            class="upload-demo"
            drag
            ref="upload"
            :action="uploadUrl"
            accept=".doc,.docx,.pdf,.xlsx,.xlx"
            multiple
            :http-request="handleRequest"
            :headers="uploadHeaders"
            :on-success="handleSuccess"
            :data="form"
            :show-file-list="true"
            :auto-upload="false"
            :limit="3"
            :before-upload="beforeUpload"
            @on-exceed="ononExceed"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">点击或拖动文件上传</div>
            <p class="textFile">
              支持单个或批量上穿，支持格式：.rar .zip .doc .docx .pdf
            </p>
          </el-upload>
        </el-form-item>
      </el-form>
      <p class="textFile" v-show="textNum.length">
        选中{{ textNum.length }}个文件，共{{ addSize | toFileSize() }}
      </p>
      <div class="progressBox" v-show="textNum.length">
        <div v-for="item in textNum" :key="item.uid" class="progressBoxz">
          <span class="textName">{{ item.name }}</span>
          <el-progress
            :percentage="progressPercent"
            class="progress"
            :status="percentagstyle"
          >
          </el-progress>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="uploads" v-loading="loading"
          >上传</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "uploadFile",
  props: {
    parentId: {
      type: [String, Number],
      required: true
    },
    fullName: {
      type: String,
      default: "我的文档"
    }
  },
  data() {
    return {
      loading: false,
      dialogTableVisible: false, //新建弹出框
      title: "",
      nameText: "",
      fileList: [],
      // 弹出框表单
      form: {
        name: "", //文件名称
        releaseDate: "", //发布日期
        evaluationCycle: "", //评估周期
        version: "", //版本号
        enabledMark: "", //状态,
        parentId: this.parentId
      },
      //表单校验
      rules: {
        releaseDate: [
          {
            type: "date",
            required: true,
            message: "请选择发布日期",
            trigger: "blur"
          }
        ],
        evaluationCycle: [
          {
            required: true,
            message: "请填写评估周期",
            trigger: "blur"
          },
          {
            pattern: /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/,
            message: "请输入正确的天数",
            trigger: "blur"
          }
        ],
        version: [
          {
            required: true,
            message: "请填写版本号",
            trigger: "blur"
          }
        ]
      },
      formLabelWidth: "80px",
      uploadHeaders: { Authorization: this.$store.getters.token },
      uploadUrl:
        process.env.VUE_APP_BASE_API + "/api/extend/FgDocument/UploaderFg", //上传地址
      progressPercent: 0, //进度条
      textNum: [], //文件上传信息数组
      formData: ""
    };
  },
  computed: {
    percentagstyle() {
      if (this.progressPercent === 100) {
        return "success";
      } else if (this.progressPercent < 100) {
        return undefined;
      }
    },
    addSize() {
      let size = null;
      this.textNum.map(item => (size += item.size - 0));
      return size;
    }
  },
  methods: {
    //文件上传成功时的钩子
    handleSuccess(res, file) {
      this.receiveing = false;
      this.$emit("receiveing", false);
      if (res.code == 200) {
        this.$message({
          message: res.msg,
          type: "success",
          duration: 1000
        });
        this.$emit("reset");
      } else {
        this.$message({
          message: res.msg,
          type: "error",
          duration: 1000
        });
      }
    },
    //点击上传
    uploads() {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          this.loading = true;
          this.form.parentId = this.parentId;
          this.formData = new FormData(); // new formData对象
          this.$refs.upload.submit(); // 提交调用uploadFile函数
          this.formData.append("evaluationCycle", this.form.evaluationCycle);
          this.formData.append("version", this.form.version);
          this.formData.append("parentId", this.form.parentId);
          this.formData.append("releaseDate", this.form.releaseDate);

          await axios({
            url: this.uploadUrl,
            method: "post",
            data: this.formData,
            headers: this.uploadHeaders,
            onUploadProgress: progressEvent => {
              // progressEvent.loaded:已上传文件大小
              // progressEvent.total:被上传文件的总大小
              this.progressPercent =
                ((progressEvent.loaded / progressEvent.total) * 100).toFixed(
                  1
                ) * 1;
            }
          });
          this.$emit("receiveing", false);
          this.$emit("initData");
          this.$refs.upload.clearFiles();
          this.loading = false;
          this.dialogTableVisible = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //上传文件之前的钩子
    beforeUpload(file) {
      this.$emit("receiveing", true);
      this.textNum.push(file);
      this.nameText = file.name;
    },
    //自定义上传
    handleRequest(file) {
      this.formData.append("files", file.file);
    },
    //关闭上传弹框
    close() {
      this.$refs.ruleForm.clearValidate();
      this.form.releaseDate = "";
      this.form.evaluationCycle = "";
      this.form.version = "";
      this.form.enabledMark = "";
      this.textNum = [];
      this.$emit("receiveing", false);
      this.$refs.upload.clearFiles();
    },
    //文件上传超过限制时的钩子
    ononExceed() {
      // this.$message.error("最多只能同时上传3个文件");
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .element.style {
  background: #ccc;
}
.myFile {
  display: flex;
  div {
    margin: 6px 0 0 25px;
  }
  .myDocument {
    width: 200px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    background-color: rgb(204, 204, 204);
    border-radius: 5px;
    margin: 0 0 20px 40px;
  }
}

.textFile {
  font-size: 12px;
  color: #c0c4cc;
  margin-top: 5px;
  margin-bottom: 10px;
}
.progressBox {
  width: 500px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  .progressBoxz {
    position: relative;
    .textName {
      position: absolute;
      left: 18px;
      top: -10px;
      font-size: 12px;
      color: #c0c4cc;
    }
    .progress {
      margin: 15px;
      margin-top: 25px;
    }
  }
}
::v-deep .el-upload-dragger {
  background-color: rgb(249, 249, 249);
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  box-sizing: border-box;
  width: 26.042vw;
  height: 130px;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin: 14px;
  margin-top: 0px;
}
::v-deep .el-upload-dragger .el-icon-upload {
  font-size: 67px;
  color: #c0c4cc;
  margin: 40px 0 16px;
  line-height: 15px;
}
</style>
